<template>
    <div class="app-container">
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="菜单名称：">
                <!-- “trim()”方法被用于删除输入的字符串两端的空格↓ -->
                <el-input v-model.trim="query.name" placeholder="菜单名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="fetchData">查询</el-button>
                <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
                <!-- 因为在此处是新增一级菜单（即“目录”），所以在“handleAdd()”中要传入“0”（以后会把这个“0”赋值给“parentId”）↓ -->
                <el-button icon="el-icon-circle-plus-outline" type="primary" @click="handleAdd(0)">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 注：“row-key”在此处指定“唯一标识的属性名/键名”（也就是树状数据所在“母行”（指“第一行、第一级”）的唯一标识（在此处为“id”）），且只有在其中的数据包含“children”字段时表格的模板才会被渲染为树形模式↓ -->
        <el-table :data="list" :cell-style="rowStyle" row-key="id" align="center" stripe border style="width: 100%">
            <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
            <el-table-column prop="name" align="center" label="名称"></el-table-column>
            <el-table-column prop="url" align="center" label="请求地址"></el-table-column>
            <el-table-column prop="code" align="center" label="权限标识"></el-table-column>
            <el-table-column prop="type" align="center" label="类型">
                <template slot-scope="scope">
                    <!-- type：1.目录；2.菜单；3.按钮↓ -->
                    <span v-if="scope.row.type === 1">目录</span>
                    <span v-if="scope.row.type === 2">菜单</span>
                    <span v-if="scope.row.type === 3">按钮</span>
                </template>
            </el-table-column>
            <el-table-column prop="icon" align="center" label="图标">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column prop="sort" align="center" label="排序"></el-table-column>
            <el-table-column align="center" label="操作" width="210">
            <!-- “scope”代表当前行的对象，可以通过它来获取当前行的某个属性值↓ -->
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleAdd(scope.row.id)">新增</el-button>
                    <el-button type="success" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- “新增”或“编辑”组件↓ -->
        <edit :title="edit.title" :dialogVisible="edit.visible" :formData="edit.formData" :remoteClose="remoteClose" />
    </div>
</template>

<script>
import api from '@/api/menu'
import Edit from './edit'
export default {
    name: 'Menu', // ←注意：左边这项的值要和路由表中配置的“name”的值保持一致
    components: {Edit}, // ←注意：左边这项相当于ES5中的“Edit:Edit”
    data () {
        return {
            list:[], // ←左边这项表示“列表数据”
            query:{}, // ←左边这项表示“查询条件”
            edit:{ // 注意：左边这项表示“子组件引用的属性对象”
                title:'',
                visible:false,
                formData:{}
            }
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        async fetchData(){
            const {data} = await api.getList(this.query) // ←注：左边这项采用了“解构赋值”的形式（具体为返回的“response.data”的值被赋值给了“{data}”中的“data”）
            this.list = data
        },
        // 新增菜单。其中，在新增子菜单时，括号中的“id”会被作为新增的子菜单的“parentId”
        handleAdd(id){
            // 当“id = 0”时表示“在条件查询的表单处点击了‘新增’按钮”，此时新增的是一级菜单；当“id != 0”时表示“点击的是表格中某一行的‘操作’列中的‘新增’按钮”，此时新增的是某菜单下面的子菜单（二级菜单）↓
            this.edit.formData.parentId = id
            this.edit.title = '新增'
            this.edit.visible = true
        },
        // 子组件会触发此事件来关闭对话框
        remoteClose(){
            this.edit.formData = {}
            this.edit.visible = false
            this.fetchData() // ←注：如果关闭对话框后不想或无需刷新列表数据，则无需调用左边的这个方法
        },
        // 编辑菜单
        handleEdit(id){
            // console.log('编辑',id)
            // 通过ID查询详情
            api.getById(id).then(response => {
                if (response.code === 20000) {
                    // 将查询到的详情数据传递过来
                    this.edit.formData = response.data
                    this.edit.title = '编辑'
                    this.edit.visible = true
                } else {
                    
                }
            })
        },
        // 删除菜单
        handleDelete(id){
            console.log('删除',id)
            this.$confirm('确认删除当前节点与子节点记录吗?', '提示', { // 技巧：按组合键“Shift+Tab”会让代码向左缩进
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 发送删除请求
                api.deleteById(id).then(response => {
                    // 处理响应结果
                    this.$message({
                        type: response.code === 20000 ? 'success' : 'error',
                        message: response.message,
                        center:true,
                    });
                })
                // 刷新列表数据
                this.fetchData()
            }).catch(() => {
                // 点击“取消”按钮，取消删除。此处无需做任何逻辑处理（即“不用理会”，因为浏览器会自动关闭消息提示框）          
            });
        },
        // 重置
        reload(){
            this.query = {}, // ←左边这一项表示“向‘this.query’传递空对象”
            this.fetchData()
        },
        rowStyle(){
            return "text-align:center";
        },
    },
}
</script>
<style lang="scss" scoped>
    div{::v-deep.el-input__inner{text-align: center;}}
</style>